<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     
    <div id="app">
  <p>计数: {{ count }}</p >
  <button @click="increment">增加</button>
  <button @click="decrement">减少</button>
</div>

<script src="vue.global.js"></script>
<script>
  const { createApp, ref } = Vue;
  
  createApp({
    setup() {
      // 使用 ref 创建响应式数据
      const count = ref(0);
      
      // 定义方法
      const increment = () => {
        count.value++;
      };
      
      const decrement = () => {
        count.value--;
      };
      
      // 返回模板中可用的数据和方法
      return {
        count,
        increment,
        decrement
      };
    }
  }).mount('#app');
</script>

</body>
</html>